<template>
  <div class="sea-table-header">
    <el-row>
      <el-col :span="8">
        <!-- 允许设置一个标题-->
        <slot name="title"></slot>

        <!-- 快捷查询 -->
        <el-form @submit.native.prevent="onSubmit" size="small" style="display: inline-block;">
          <el-input v-model="keyword" placeholder="请输入内容" style="width: 200px;margin-right: 6px;"
                    :size="props.size">
            <template #append>
              <el-button @click="onSubmit" :loading="loading">
                <i class="fa fa-search"></i>
              </el-button>
            </template>
          </el-input>
        </el-form>

        <!-- 按钮区 -->
        <slot name="buttons"></slot>
      </el-col>

      <el-col :span="16" v-if="!disabledForm">
        <div style="width: calc(100% - 36px);float: left;">
          <el-row>
            <el-form ref="form" :model="params" v-show="expand" :inline="true">

              <!-- 输入框区域 -->
              <slot name="input"></slot>

              <el-form-item>
                <el-button size="small" type="primary" @click="onSubmit" :loading="loading">查询</el-button>
                <el-button size="small" @click="onReset" :loading="loading">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </div>

        <!-- 展开按钮 -->
        <div style="width: 32px;float: right;">
          <el-button size="small" title="展开" @click="switchExpand">
            <i :class="expand? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
/* eslint-disable */
import {ref, computed, inject} from "vue";
import Layers from "@/lang/layers/index";
import Asserts from "@/lang/core/asserts";

/**
 * 通用表头
 *
 * 要求使用 smart 前缀的配套组件
 */
const props = defineProps({
    // 触发器，数据联动逻辑
    trigger: {type: Function, default: undefined}
    // 按钮组件大小
    , size: {type: String, default: 'small'}
    // 禁用表单
    , disabledForm: {type: Boolean, default: false}
    // 禁用表单
    , params: {type: Object, default: undefined}
    // 表单模型
    , model: {type: Array, default: undefined}
});

// 展开表单
const expand = ref(false);
// 关键字
const keyword = ref('');
// 默认值
const defaultValue = ref(props.params || {});

// require provide datalist
const dataTable = inject('dataTable');
Asserts.notBlank(dataTable, "data-table is undefined!")

// datalist loading status
const loading = computed(() => dataTable.loading.value);

/**
 * 展开搜索栏，默认搜索栏处于隐藏状态
 */
const switchExpand = () => {
    expand.value = !expand.value;
};

/**
 * 点击了提交按钮
 */
const onSubmit = () => {
    const params = props.disabledForm ? {} : props.params;
    params.keyword = keyword.value;
    dataTable.handlerParams(params);
};

/**
 * 点击了重置按钮
 */
const onReset = () => {
    Layers.assign(defaultValue.value, this.params);
    onSubmit();
};
</script>